<template>
  <div>
    <!-- 表格整体 -->
    <common-table
      :table-attrs="tableAttrs"
      @multiple="selectHandler"
      @controller="controllerHandler"
    >
      <template #default>
        <!-- 表格内搜索表单 -->
        <common-form
          :form-infos="searchForm"
          :form-attrs="{
            'label-width': 'auto',
            'label-position': 'left',
            size: 'small',
            inline: true,
          }"
          @submit="onSearchSubmit"
        />
        <el-card>
          <div id="settle">
            <div>
              <div id="right">供应商收入金额 (元)</div>
              <div id="money">0.00</div>
            </div>
            <div id="right">
              <div>供应商结算总金额 (元)</div>
              <div id="money">0.00</div>
            </div>
             <div id="right">
              <div>供应商退款金额 (元)</div>
              <div id="money">0.00</div>
            </div>
             <div id="right">
              <div>佣金金额 (元)</div>
              <div id="money">0.00</div>
            </div>
            <div id="right">
              <div>平台抽成金额(元)</div>
              <div id="money">0.00</div>
            </div>
            <div id="right">
              <div>平台结算金额(元)</div>
              <div id="money">0.00</div>
            </div>
            <div id="right">
              <div>平台退款金额(元)</div>
              <div id="money">0.00</div>
            </div>
          </div>
        </el-card>
      </template>

      <!-- 表格展开信息 -->
      <template #expand="props">
        {{props.props.row}}
      </template>
    </common-table>

    <!-- 弹出框编辑表单 -->
    <el-dialog title="编辑名称" v-model="isShowDialog">
      <common-form
        :form-infos="editForm"
        :form-attrs="{
          'label-width': 'auto',
          'label-position': 'left',
          size: 'small',
          inline: true,
        }"
        @submit="onEditSubmit"
      />
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, shallowReactive, ref } from "vue";

export default defineComponent({
  setup() {
    const tableAttrs = shallowReactive({
      // Table Attributes
      name: '供应商结算',
      infos: ['供应商收入金额 = 供应商结算总金额 - 供应商退款金额 - 佣金金额', '平台抽成金额 = 平台结算总抽成 - 平台退款抽成'],
      attrs: {
        data: [
          //表格需要的数据
         {
            billNumber: "2021008270000",
            supplierNumber: "5",
            orderTotal: "00.0",
            supplierSettle:'00.0',
            flatfromCommission:'00.0',
            accountStartTime: "2021-08-27 00:00:00",
            accountEndTime: "2021-08-27 00:00:00",
            settleTime: "2021-08-27 00:00:00",
          },
        {
            billNumber: "2021008270000",
            supplierNumber: "5",
            orderTotal: "00.0",
            supplierSettle:'00.0',
            flatfromCommission:'00.0',
            accountStartTime: "2021-08-27 00:00:00",
            accountEndTime: "2021-08-27 00:00:00",
            settleTime: "2021-08-27 00:00:00",
          },
          {
            billNumber: "2021008270000",
            supplierNumber: "5",
            orderTotal: "00.0",
            supplierSettle:'00.0',
            flatfromCommission:'00.0',
            accountStartTime: "2021-08-27 00:00:00",
            accountEndTime: "2021-08-27 00:00:00",
            settleTime: "2021-08-27 00:00:00",
          },
          {
            billNumber: "2021008270000",
            supplierNumber: "5",
            orderTotal: "00.0",
            supplierSettle:'00.0',
            flatfromCommission:'00.0',
            accountStartTime: "2021-08-27 00:00:00",
            accountEndTime: "2021-08-27 00:00:00",
            settleTime: "2021-08-27 00:00:00",
          },
        ],
        ref: "multipleTable",
        style: "100%",
      },
      // Table-column Attributes
      column: [
        {
          prop: "billNumber",
          label: "账单编号",
        },
        {
          prop: "supplierNumber",
          label: "供应商数量",
        },
        {
          prop: "orderTotal",
          label: "订单总额",
          // sortable: true,
        },
        {
          prop: "supplierSettle",
          label: "供应商结算",
        },
        {
          prop: "flatfromCommission",
          label: "平台总抽成",
        },
        {
          prop: "accountStartTime",
          label: "账期开始时间",
        },
         {
          prop: "accountEndTime",
          label: "账期截至时间",
        },
        {
          prop: "settleTime",
          label: "结算时间",
        },
      ],
      // 操作按钮
      controller: ["查看"],
    });

    //搜索表单配置
    const searchForm = shallowReactive([
       {
        id: 13,
        name: "CommonDatePicker",
        prop: "datePicker",
        value: "",
        formItemAttrs: {
          label: "账期截止日期",
        },
        inputAttrs: {
          type: "datetime",
          placeholder: "选择日期",
        },
      },
    ]);

    //编辑表单配置
    const editForm = shallowReactive([
      {
        id: 1,
        name: "CommonInput",
        prop: "f1",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
      {
        id: 2,
        name: "CommonInput",
        prop: "f2",
        value: "",
        formItemAttrs: {
          label: "字段",
        },
        inputAttrs: {
          type: "text",
          placeholder: "请输入内容",
        },
      },
    ]);

    //弹出框绑定
    let isShowDialog = ref(false);

    //表格多选框触发
    const selectHandler = (val) => {
      console.log(val);
    };

    //表格操作按钮触发
    const controllerHandler = (type, row) => {
      console.log(type, row);
    };

    //搜索表单提交
    const onSearchSubmit = (data) => {
      console.log("search", data);
    };

    //编辑表单提交
    const onEditSubmit = (data) => {
      console.log("edit", data);
    };

    return {
      tableAttrs,
      searchForm,
      editForm,
      isShowDialog,
      selectHandler,
      controllerHandler,
      onSearchSubmit,
      onEditSubmit,
    };
  },
});
</script>
<style lang="scss" scoped>
    #settle{
      display: flex;
      text-align: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    #money{
      font-size: 17px;
      font-weight: bold;
    }
</style>
